Tema 3.2: HTML - Lenguaje de Marcado de Hipertexto

HTML (HyperText Markup Language) es el lenguaje fundamental para crear páginas web. Define la estructura y el contenido de una página mediante el uso de etiquetas (tags) que describen los diferentes elementos como títulos, párrafos, imágenes, enlaces y formularios.

En este tema estudiaremos los fundamentos del lenguaje HTML, etiquetas básicas y avanzadas, estructura semántica de documentos y las mejores prácticas para crear páginas web accesibles y bien estructuradas.

Videos de Aprendizaje

3.2.1 HTML: conceptos básicos

Introducción completa a los conceptos fundamentales de HTML, incluyendo estructura básica, etiquetas esenciales y primeros pasos en el desarrollo web.

3.2.2 Fundamentos HTML

Explicación detallada de los fundamentos de HTML, cubriendo sintaxis, elementos estructurales y prácticas recomendadas para crear documentos HTML válidos y semánticos.

Contenido Opcional

W3Schools HTML - Tutorial Completo

Tutorial completo e interactivo de HTML en W3Schools, con ejemplos prácticos, referencias de todas las etiquetas y ejercicios para practicar cada concepto.

Ver Tutorial en W3Schools

Investigación Detallada

Estructura Básica HTML

Todo documento HTML tiene una estructura fundamental: <!DOCTYPE html> (declaración), <html> (elemento raíz), <head> (metadatos), y <body> (contenido visible). Incluye elementos esenciales como <title>, <meta charset="UTF-8">, y <viewport>.

Etiquetas de Texto y Encabezados

HTML proporciona etiquetas para estructurar texto: <h1> a <h6> (encabezados), <p> (párrafos), <strong> y <em> (énfasis), <br> (salto de línea), <hr> (línea horizontal). Los encabezados siguen jerarquía semántica.

Enlaces e Imágenes

Elementos multimedia y de navegación: <a href=""> (enlaces), <img src="" alt=""> (imágenes), <ul> y <ol> (listas), <table> (tablas). El atributo alt en imágenes es esencial para accesibilidad.

Elementos Semánticos HTML5

HTML5 introdujo elementos semánticos que mejoran la estructura y accesibilidad: <header>, <nav>, <main>, <section>, <article>, <aside>, y <footer>. Estos elementos describen mejor el contenido.

Formularios y Entrada de Datos

Elementos para capturar información del usuario: <form> (contenedor), <input> (diferentes tipos), <textarea> (texto multilínea), <select> (lista desplegable), <button> (botones). Atributos como required y placeholder mejoran UX.

Validación y Mejores Prácticas

HTML válido sigue estándares W3C. Mejores prácticas: HTML semántico, atributos alt en imágenes, estructura lógica, accesibilidad (ARIA), y validación de código. Usar el validador W3C para verificar corrección.

Características Fundamentales de HTML

Lenguaje de marcado: No es un lenguaje de programación, describe estructura
Basado en etiquetas: Usa elementos delimitados por < >
Jerárquico: Elementos anidados forman un árbol DOM
Plataforma cruzada: Funciona en todos los navegadores y dispositivos
Accesible: Puede ser interpretado por tecnologías asistivas
Extensible: Se integra con CSS y JavaScript
Estándar abierto: Mantenido por W3C y WHATWG
Semántico: Los elementos describen su contenido

Ejemplo de Estructura para el Micrositio

Estructura Recomendada del Proyecto

index.html - Página principal con introducción y navegación
modulo1.html - Contenido completo del Módulo 1
modulo2.html - Contenido completo del Módulo 2
modulo3.html - Contenido completo del Módulo 3
temas-detalle/ - Carpeta con páginas individuales para cada tema

Elementos HTML a Incluir:

Estructura semántica: <header>, <nav>, <main>, <section>, <footer>
Navegación: <nav> con <ul> y <li> para menús
Contenido: <h1>-<h6>, <p>, <article>, <aside>
Multimedia: <img>, <video>, <iframe> (para videos incrustados)
Tablas: <table>, <thead>, <tbody>, <tr>, <td> para datos estructurados
Formularios: <form>, <input>, <textarea>, <select> para interacción
Enlaces: <a> con atributo href para navegación interna y externa

Material de Lectura

Guía Completa del Tema 3.2: HTML - Lenguaje de Marcado de Hipertexto

Documento oficial con teoría detallada sobre HTML, etiquetas básicas y avanzadas, estructura semántica, formularios, tablas, multimedia y mejores prácticas para crear páginas web accesibles y válidas según estándares W3C.

Descargar PDF

Módulo 3: Desarrollo Web y Tecnologías Emergentes